import { useNavigate } from "react-router"
import  moment from 'moment'
import { useEffect, useState } from "react"
import Drop from "./drop"
import axios from 'axios'
import { useDispatch, useSelector } from "react-redux"
import {changeWeather} from "../store/weatherSlice"
const Header = () => {
    const dispatch = useDispatch()
    const weather = useSelector(state => state.weather.weather)
    const navigate = useNavigate()
    const [time,setTime] = useState(moment().format("YYYY-MM-DD HH:mm:ss"))
    // const [weather,setWeather] = useState()
    useEffect(()=>{
        let timer = setInterval(()=>{
            setTime(moment().format("YYYY-MM-DD HH:mm:ss"))
        },500)
        return () =>clearInterval(timer)
    },[])
    useEffect(()=>{
        getWeather()
    },[])
    const getWeather = async() => {
        // 获取远端图片
        let data = null 
        await axios({
            url:'http://www.jcznedu.com:5000/weather/prediction/?city=峨眉山&&limit=5',
            method:'GET',
            withCredentials:true,
        }) 
        .then(res => {
            data = res.data.data.daly
            // setWeather(data)
            dispatch(changeWeather(data))
        })
    }
    return(
        <div className='header'>
            <div className="header-left">
                <div className="head-drop">
                    <Drop></Drop>
                </div>
                <div className="weathers">
                    <div className="today-Icon">

                    </div>
                    <div className="weather">
                        <div className="today-weather">
                            {/* {weather1} */}
                            {/* {weather?'今天':'加载中'} */}
                            {'今天'}
                           
                        </div>
                        <div className="today-temperure">
                                {/* {weather?weather[0].high+'~'+weather[0].low:'加载中'} */}
                                17~21度
                        </div>
                    </div>
                    <div className="today-Icon">

                    </div>
                    <div className="weather">
                        <div className="today-weather">
                            {/* {weather?weather[1].date:'加载中'} */}
                            明天
                        </div>
                        <div className="today-temperure">
                                {/* {weather?weather[1].high+'~'+weather[1].low:'加载中'} */}
                                16~20度
                        </div>
                    </div>
                    <div className="today-Icon">

                    </div>
                    <div className="weather">
                        <div className="today-weather">
                        后天
                            {/* {weather?weather[2].date:'加载中'} */}
                            
                        </div>
                        <div className="today-temperure">
                                {/* {weather?weather[2].high+'~'+weather[2].low:'加载中'} */}
                                18~24度
                        </div>
                    </div>
                </div>
            </div>
            <div className="header-center">
                <h1>川旅智行中控大屏</h1>
                <div className="one-button right-button" onClick={(e) => {
                        navigate('/traffic')
                        document.querySelectorAll('.one-button').forEach(e=>{
                            e.classList.remove('hover-button')
                        })
                        e.target.classList.add('hover-button')
                    }}>
                    交通可视化
                </div>
                <div className="one-button left-button" onClick={(e) => {
                        navigate('/admin')
                        document.querySelectorAll('.one-button').forEach(e=>{
                            e.classList.remove('hover-button')
                        })
                        e.target.classList.add('hover-button')
                    }}>
                    智慧景区
                </div>
            </div>
            <div className="header-right">
                <div className="right-time">
                    {time}
                </div>
            </div>
        </div>
    )
}
export default Header